<template>
  <div @touchmove.stop.prevent>
  <tabbar class="crm-tabbar">
    <tabbar-item v-for="tabitem in tabbarList" :selected="tabitem.id === activeItem" :key="tabbarList.icon" @on-item-click="onItemClick" :link="tabitem.link">
    <img slot="icon" :src="tabitem.icon" />
    <img slot="icon-active" :src="tabitem.aicon"/>
    <span slot="label">{{ tabitem.text }}</span>
    </tabbar-item>
  </tabbar>
  </div>

</template>


<script>

  import { Tabbar, TabbarItem, Group, Cell } from 'vux'
  import {
    HIDE_COVER
  } from '../store/mutation-types';


  export default {
  props: {
    activeItem : {
    type: String,
    default: 'workbench'
    }
  },
  data () {

    let imgServer = this.$store.state.app.imgServer;

    return {


    tabbarList : [
      {
        id:'workbench',
        icon: imgServer+'workbench_n.svg',
        text: '工作台',
        aicon: imgServer+'workbench_p.svg',
        link: '/'
      },

      {
        id:'h5marketing',
        icon: imgServer+'h5marketing_n.svg',
        text: 'H5营销',
        link: '/h5marketing',
        aicon: imgServer+'h5marketing_p.svg',
      },

      {
        id:'marketing',
        icon: imgServer+'normalmarketing_n.svg',
        text: '普通营销',
        link: '/marketing',
        aicon: imgServer+'normalmarketing_p.svg',
      },

      {
        id:'mine',
        icon: imgServer+'mine_n.svg',
        text: '我的',
        link: '/mine',
        aicon: imgServer+'mine_p.svg',
        selected: ''
      }
    ]
    };
  },

  watch:{

    selected () {

    },

    activeIndex () {

    }
  },

  computed:{
    isShowCover () {
    return this.$store.state.app.isShowCover
    }
  },

  methods:{
    onItemClick () {

      if(this.isShowCover === true) {
        this.$store.commit(HIDE_COVER)
      }

    }
  },


  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  }
  }
</script>

<style lang="less">

.crm-tabbar{

  &.weui-tabbar{
    position: fixed;

    .weui-tabbar__icon{
    width: 20px;
    height: 20px;
    padding: 3px;
    }
  }

  .weui-tabbar__item.weui-bar__item_on {

    .weui-tabbar__label{
      color: #20a0ff;
    }
  }
}
</style>
